<template>
  <div class="padding20">
    <div class="content-left">
      <Row :gutter="16">
        <Col span="16">
        <div class="section-container control-sec">
          <div class="section-left">
            <div class="section-title">安全预警</div>
            <div class="section-body">
              您尚未开通安全预警</br>
              <a class="btn-ghost">免费开通预警通知</a>
            </div>
          </div><div class="section-right">
          <div class="section-title">安全防护</div>
          <div class="section-body">
            <div class="item-horizontal item-horizontal-l">
              <span class="item-text">主机安全</span>0件
            </div>
            <div class="item-horizontal item-horizontal-l">
              <span class="item-text">WEB攻击</span>
              <a class="text-link">购买</a>
            </div>
          </div>
        </div>
        </div>
        </Col>
        <Col span="8">
        <div class="section-container control-sec">
          <div class="section-title">待办事项</div>
          <div class="section-body">
            <div class="item-horizontal item-horizontal-hover">
              <span class="item-text">工单</span>0
            </div>
            <div class="item-horizontal item-horizontal-hover">
              <span class="item-text">续费</span>0
            </div>
            <div class="item-horizontal item-horizontal-hover">
              <span class="item-text">未支付订单</span>0
            </div>
          </div>
        </div>
        </Col>
      </Row>
      <Row>
        <Col span="24">
        <div class="section-container mar-top20">
          <div class="section-title">最近使用的产品<a class="fr text-link">历史日志</a></div>
          <div class="section-body">
            <div class="item-horizontal item-horizontal-hover text-center">
              云数据库 RDS 版
            </div>
            <div class="item-horizontal item-horizontal-hover text-center">
              云服务器 ECS
            </div>
          </div>
        </div>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <div class="section-container mar-top20">
            <Tabs value="name1" class="tabs-sec">
              <TabPane label="我的资源" name="name1">
                <Row :gutter="16">
                <Col span="8">
                  <div class="section-title font-bold">数据库</div>
                  <ul>
                    <li class="product-item"><a>云数据库 HybirdDB for MySQL</a></li>
                    <li class="product-item"><a>云数据库 HBase</a></li>
                    <li class="product-item"><a>云数据库 HybirdDB for PostgreSQL</a></li>
                    <li class="product-item"><a>数据传输服务DTS</a></li>
                  </ul>
                  <div class="section-title font-bold mar-top20">分析</div>
                  <ul>
                    <li class="product-item"><a>云数据库 HybirdDB for PostgreSQL</a></li>
                  </ul>
                </Col>
                <Col span="8">
                  <div class="section-title font-bold">存储于CDN</div>
                  <ul>
                    <li class="product-item"><a>CDN</a></li>
                  </ul>
                  <div class="section-title font-bold mar-top20">监控与管理</div>
                  <ul>
                    <li class="product-item"><a>云监控</a></li>
                  </ul>
                  <div class="section-title font-bold mar-top20">域名与网站（万网）</div>
                  <ul>
                    <li class="product-item"><a>域名</a></li>
                    <li class="product-item"><a>云解析 DNS</a></li>
                  </ul>
                </Col>
                <Col span="8">
                  <div class="section-title font-bold">数据库</div>
                  <ul>
                    <li class="product-item"><a>云数据库 HybirdDB for MySQL</a></li>
                    <li class="product-item"><a>云数据库 HBase</a></li>
                    <li class="product-item"><a>云数据库 HybirdDB for PostgreSQL</a></li>
                    <li class="product-item"><a>数据传输服务DTS</a></li>
                  </ul>
                  <div class="section-title font-bold mar-top20">分析</div>
                  <ul>
                    <li class="product-item"><a>云数据库 HybirdDB for PostgreSQL</a></li>
                  </ul>
                </Col>
              </Row>
              </TabPane>
              <TabPane label="我的消费" name="name2">标签二的内容</TabPane>
              <TabPane label="我的积分和权益" name="name3">标签三的内容</TabPane>
            </Tabs>
          </div>
        </Col>
      </Row>
    </div>
    <div class="content-right">
      <div class="section-container">
        <Tabs value="name1" class="tabs-sec">
          <TabPane label="全部公告" name="name1">
            <ul>
              <li class="product-item"><a>(已恢复) 12月20日各地域网络异常通告</a></li>
              <li class="product-item"><a>12月21日光缆割接通告</a></li>
              <li class="product-item"><a>12月23日光缆割接通告</a></li>
            </ul>
            <a class="text-link">更多</a>
          </TabPane>
          <TabPane label="云产品" name="name2">标签二的内容</TabPane>
          <TabPane label="域名与网站" name="name3">标签三的内容</TabPane>
          <TabPane label="备案" name="name4">标签三的内容</TabPane>
        </Tabs>
      </div>
      <div class="section-container mar-top20">
        <div class="section-title">管理助手<a class="fr text-link">查看更多</a></div>
        <div class="control-cell">
          <div class="control-cell-icon">
            <img src="https://img.alicdn.com/tps/TB1dLXsPFXXXXXjXXXXXXXXXXXX-48-44.png">
          </div>
          <div class="section-title font-bold">短信服务</div>
          <p>完美支撑双十一6亿条短信发送量！三网合一3秒触达，99%到达率</p>
          <a class="btn-ghost">立即查看</a>
        </div>
        <div class="control-cell mar-top20">
          <div class="control-cell-icon">
            <img src="https://img.alicdn.com/tps/TB1dLXsPFXXXXXjXXXXXXXXXXXX-48-44.png">
          </div>
          <div class="section-title font-bold">云产品推荐配置</div>
          <p>精选上云配置和解决方案，满足您的典型业务需求。</p>
          <a class="btn-ghost">立即查看</a>
        </div>
      </div>
      <div class="section-container mar-top20">
        <div class="section-title">新产品快报</div>
        <ul>
          <li class="product-item"><a><span class="font-bold">[新地域/可用区]</span>阿里云Redis华北5 （呼和浩特）开放售卖</a></li>
          <li class="product-item"><a><span class="font-bold">[新地域/可用区]</span>云数据库Memcache华北5（呼和浩特）区域</a></li>
          <li class="product-item"><a><span class="font-bold">[修复问题]</span>DRDS季度问题修复版发布</a></li>
        </ul>
        <a class="text-link">更多</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {

  }
</script>
<style lang="less">
  @base: #ff6579;
  .content-left {
    padding-right: 436px;
  }
  .content-right {
    width: 420px;
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .section-container {
    padding: 16px 16px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  }
  .section-left{
    width: 60%;
    display: inline-block;
    vertical-align: top;
  }
  .section-title{
    margin-bottom: 10px;
  }
  .section-right{
    width: 40%;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
  }
  .item-horizontal{
    height: 38px;
    line-height: 38px;
    margin-bottom: 4px;
    display: block;
    background: #f5f5f6;
    border: 1px solid #f5f5f6;
    -o-transition: all 0.15s, 0.15s;
    -moz-transition: all 0.15s, 0.15s;
    -webkit-transition: all 0.15s, 0.15s;
  }
  .item-horizontal-l{
    height:59px;
    line-height: 60px;
  }
  .item-horizontal-hover:hover {
    background: #fff;
    border: 1px solid @base;
    cursor: pointer;
  }
  .item-text{
    width: 65%;
    padding-left: 36px;
    color: #333;
    display: inline-block;
    vertical-align: top;
  }
  .control-sec{
    height:180px;
    overflow: hidden;
  }
  .product-item{
    margin: 0;
    padding: 0;
    height: 26px;
    line-height: 26px;
    background: none;
  }
  .product-item>a{
    display: inline-block;
    width: 100%;
    height: 100%;
    color:#333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .product-item a:hover{
    text-decoration: underline;
  }
  .control-cell{
    position: relative;
    padding: 20px 20px 20px 74px;
    border: 1px solid #f2f2f2;
  }
  .control-cell:hover{
    border-color:darken(@base,2%);
    -webkit-box-shadow: 0 0 20px fade(@base,20%);
    -moz-box-shadow: 0 0 20px fade(@base,20%);
    box-shadow: 0 0 20px fade(@base,20%);
  }
  .control-cell-icon{
    position:absolute;
    left:0;
    top:0;
    width:60px;
    height:100%;
    background: #f5f5f6;
    text-align: center;
  }
  .control-cell-icon img{
    display: inline-block;
    margin-top: 44px;
    width: 23px;
    opacity: .5;
    filter: alpha(opacity=50);
  }
</style>
